<template>
	<div class="trainChange train">
		<trainHeader name="改签/变更到站"></trainHeader>
		<div class="trainChange_content">
			<div class="trainChange_content_every">
				<div class="trainChange_content_message">
					<div class="trainChange_content_title">出发站</div>
					<div style="color: #b7b7b7;">
						{{fromStation}}
					</div>
				</div>
			</div>
			<div class="trainChange_content_every" @click="changeToStation">
				<div class="trainChange_content_message">
					<div class="trainChange_content_title">到达站</div>
					<div>
						{{toStation}}
					</div>
				</div>
				<div class="trainChange_content_pic">
					<img src="http://h5.kpcx179.com/wximages/train/gengduo-@2x.png" alt="" />
				</div>
			</div>
			<div class="trainChange_content_every" @click="changeDate">
				<div class="trainChange_content_message">
					<div class="trainChange_content_title">出发日期</div>
					<div>
						{{departureDate | getDepartureDate}}
					</div>
				</div>
				<div class="trainChange_content_pic">
					<img src="http://h5.kpcx179.com/wximages/train/gengduo-@2x.png" alt="" />
				</div>
			</div>
		</div>
		<div class="trainChange_tip">
			<div class="trainChange_tip_title">
				改签到站说明
			</div>
			<p>
				"2015年6月，12306新加了“变更到站”服务，详情如下：
			</p>
			<p>
				1.距发车前48小时以上，可改签，也可任意变更到达车站。例如原来是“上海-北京”，突然想去杭州，可修改到达站变为“上海-杭州”。
			</p>
			<p>
				2.距发车前48小时内，只能走原有改签流程。
			</p>
			<p>
				3.改签规则：
			</p>
			<p>
				（1）距发车48小时以上，可改签任意一天的车票。
			</p>
			<p>
				（2）距发车48小时内，不能往后跨天改签，即可改签开车前的其他车，也可改签开车后至票面日期当天24:00之间的其他车，不办理票面日期后的改签；开车之后，仍可改签当日其他列车，但只能去票面出发站办理改签。 
			</p>
			<p>
				（3）改签（含变更到站）后的车票乘车日期在2016年1月24日开始至2016年3月3日期间，退票时一律按票面价20%核收退票费。
			</p>
		</div>
		<div class="trainChange_bottom">
			<div class="trainChange_btn" @click="next">
				下一步
			</div>
		</div>
	</div>
</template>
<style scoped>
	
	.trainChange {
		padding-bottom: 200px;
	}
	
	.trainChange_content {
		margin-top: 17px;
		background: #fff;
	}
	
	.trainChange_content_every {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30px;
		padding-right: 20px;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 2px solid #F4F5F9;
		height: 98px;
		font-size: 32px;
		color: #333333;
	}
	
	.trainChange_content_every:last-child {
		border: 0;
	}
	
	.trainChange_content_message {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100%;
	}
	
	.trainChange_content_title {
		width: 190px;
		text-align: left;
	}
	
	.trainChange_content_pic {
		width: 21px;
		height: 38px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainChange_content_pic > img {
		width: 100%;
		height: 100%;
	}
	
	.trainChange_tip {
		width: 100%;
		padding: 38px 22px 0 32px;
		box-sizing: border-box;
	}
	
	.trainChange_tip_title {
		padding-bottom: 36px;
		font-size: 28px;
		color: #8a8a8a;
		text-align: left;
	}
	
	.trainChange_tip > p {
		font-size: 24px;
		line-height: 42px;
		color: #b0afaf;
		text-align: left;
	}
	
	.trainChange_bottom {
		padding-bottom: 64px;
		background: #F4F5F9;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	
	.trainChange_btn {
		width: 714px;
		height: 98px;
		background-color: #3bc3c2;
		border-radius: 15px;
		font-size: 36px;
		color: #fefefe;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	export default {
		name: "trainChange",
		data() { //数据
			return {
				fromStation:"",
				toStation:"",
				departureDate:"",
			}
		},
		mounted() {
			var changeMessage = this.$store.state.train.trainStore.changeMessage;
			this.fromStation = (changeMessage && changeMessage.fromStation) || this.$route.query.fromStation || ""; //出发站
			this.toStation = (changeMessage && (changeMessage.toStationName || changeMessage.toStation)) || this.$route.query.toStation || ""; //到达站
			this.departureDate = (changeMessage && changeMessage.departureDate) || this.$route.query.departureDate || ""; //日期
		},
		created() {
		
		},
		methods: {
			changeToStation(){ //修改到站
				this.$router.push({
					name: 'trainCity',
					query: {
						isChangTicket:1,
					},
				});
			},
			changeDate(){
				this.$router.push({
					name: 'trainDate',
					query: {
						isChangTicket:1,
						departureDate:this.departureDate.split(" ")[0],
					},
				});
			},
			next(){
				this.$router.push({
					name: 'trainList',
					query: {
						fromCity: this.fromStation,
						toCity: this.toStation,
						departureDate: this.departureDate.split(" ")[0],
						Highspeed:false,
						isChangTicket:1,
					},
				});
			}
		},
		filters: {
			getDepartureDate(departureDate){
				if (!departureDate) return;
				var weekday = ["周日","周一","周二","周三","周四","周五","周六"];
				var day = new Date(departureDate.replace(/\./g,"/").replace(/-/g,"/"));
				return day.format("yyyy-MM-dd") + " " + weekday[day.getDay()];
			}
		},
		components: {
			trainHeader
		},
	};
</script>